<template>
	<div class="navbar navbar-default" role="navigation">
	    <div>
	        <div class="navbar-header">
	            　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
	            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
	                <span class="sr-only">Toggle Navigation</span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	            </button>
	            <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
	            <a href="/" class="navbar-brand">
	                <img src="img/quiz.png" alt="quiz">
	            </a>
	        </div>
	        <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
	        <div class="collapse navbar-collapse navbar-responsive-collapse">
	            <ul class="nav navbar-nav">
	                <li><a href="/Class/classes.html">班级</a></li>
	                <li><a href="/Course/course.html" v-if="user.isTeacher">课程</a></li>
	                <li><a class="pointer" v-if="showFileClass" data-toggle="modal" data-target="#file-manage-modal" @click="toggleFileManage">归档管理</a></li>
	            </ul>
	            <ul class="nav navbar-nav pull-right">
	            	<li v-if="!user.isTeacher"><popover title="通知" placement="bottom" :content="notices"></popover></li>
	                <li class="dropdown">
	                    <a href="##" data-toggle="dropdown" class="dropdown-toggle">
	                        {{user.name}}<span class="caret"></span>
	                    </a>
	                    <ul class="dropdown-menu dropdown-menu-right">
	                        <li><a href="/Account/setting.html"><span class="glyphicon glyphicon-user"></span> 个人设置</a></li>
	                        <li><a href="/index/logout"><span class="glyphicon glyphicon-log-out"></span> 安全退出</a></li>
	                    </ul>
	                </li>
	            </ul>
	        </div>
	    </div>
	</div>
</template>

<script>
	import auth from '../../Component/Auth/auth.js';
	import Popover from '../Popover/Popover'

	export default {
		created: function () {
			this.user = auth.getInfo();
		},
		ready () {
			this.$http.post('/message/notMessage').then(function(resp) {
				if (resp.data.status === 1) {
					this.notices = resp.data.data.message ? resp.data.data.message : [];
				} 
			}, function(resp) {
				// error callback
		        this.notice = {type: 0, msg: resp.statusText};
			})
			// $('#popover').popover()
		},
		data () {
			return {
				notices: []
			}
		},
		props: ['showFileClass', 'user'],
		methods: {
			toggleFileManage: function() {
				this.$dispatch('file-class-modal', this.index);
			}
		},
		components: {
			Popover
		}
	}
	
</script>
<style >
	.navbar-brand {
		padding: 10px 0 10px 15px;
	}
	.navbar-brand img {
		width: 60px;
	}
</style>